<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button v-if="btnp.czyuan_xzczy" @click="modal_add=true;" class="zh-hollow" type="primary" icon="plus-round">新增操作员</Button>
      </div>
      <Form :model="formItem" :label-width="70">
        <Row :gutter="10" type="flex" align="middle"  >
          <Col span="8">
              <FormItem label="操作员">
                <Input v-model="formItem.loginName" placeholder="登录帐号/名称"></Input>
              </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="账号类型">
                <Select v-model="formItem.loginType" @on-change="handleGetCondition">
                    <Option  v-for="item in moreTypeList" :value="item.uuid" :key="item.uuid">{{ item.desc }}</Option>
                </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="所属">
                <Select v-model="formItem.belongedTo" filterable :disabled="formItem.loginType=='00'||formItem.loginType=='全部'">
                    <Option  v-for="item in belongList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                </Select>
            </FormItem>
          </Col>
        
          <Col :span="12">
            <FormItem label="新增时间">
                <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row  >
          <Col span="8" offset="16"  style="text-align:right;">
            <Button class="zh-hollow" type="primary" @click="searchTable">搜索</Button>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card style="margin-top:10px;" :padding="0">
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page :total="total" show-total show-sizer :current.sync="formItem.pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
    </Card>
    <Modal :loading="addLoad" v-model="modal_add" title="新增操作员" @on-ok="validatesSave"  ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form :model="addForm" :label-width="80" style="padding:15px 30px;">
        <FormItem label="登录账号*">
          <Input v-model="addForm.mobile" ></Input>
        </FormItem>
        <FormItem label="账号名称*">
          <Input v-model="addForm.name" ></Input>
        </FormItem>
        <FormItem label="账号类型*">
          <Select v-model="addForm.user_type" @on-change="accountChange" >
            <Option  v-for="item in typeList" :value="item.uuid" :key="item.uuid">{{ item.desc }}</Option>
          </Select>
        </FormItem>
        <template v-if="addForm.user_type=='00'">
          <FormItem  label="分组*">
            <Select v-model="addForm.group_uuid" >
              <Option  v-for="item in groupList" :value="item.uuid" :key="item.uuid">{{ item.names }}</Option>
            </Select>
          </FormItem>
          <!-- <FormItem  label="可见客户*">
            <p class="canSeeText" @click="selectCanSee">{{canSeeCus}}</p>
          </FormItem> -->
        </template>
        <FormItem v-if="addForm.user_type=='01'" label="所属客户*">
          <Select v-model="addForm.inst_uuid" filterable>
            <Option  v-for="item in customerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem v-if="addForm.user_type=='02'" label="所属服务商*">
          <Select v-model="addForm.inst_uuid"  filterable>
            <Option  v-for="item in seviceList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="设置密码*">
          <Input v-model="addForm.password" type="password" :maxlength="20" ></Input>
        </FormItem>
        <FormItem label="确认密码*">
          <Input v-model="addForm.repassword"  type="password" :maxlength="20"></Input>
        </FormItem>
      </Form>
    </Modal>
    <!-- <Modal v-model="canSee_modal" title="选择可见用户" @on-ok="saveCanSeeCus" ok-text="保存" cancel-text="放弃操作">
      <div style="padding:15px 30px;">
        <Tree :data="treeData" show-checkbox></Tree>
      </div>
    </Modal> -->
    <Modal :loading="pwdLoad" v-model="modal_pwd" title="重置密码" @on-ok="changePwd" ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form :model="pwd" :label-width="80" style="padding:15px 30px;">
        <FormItem label="设置新密码*">
          <Input v-model="pwd.password" :maxlength="20" type="password" placeholder="8-20位，同时包含字母和数字"></Input>
        </FormItem>
        <FormItem label="确认密码*">
          <Input v-model="pwd.repassword" :maxlength="20" type="password" placeholder="再次输入密码"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import util from "@/libs/util.js"
import {
  getOperatorTable,
  deleteOperator,
  changePassword,
  getServiceAll,
  getAllGroup,
  saveOperator,
  operatorAllCondition
} from '@/libs/system.js'
export default {
name:'',
  data () {
    return {
      btnp:{},
      btn:{
        czyuan_xzczy:false,
        czyuan_czmm:false,
        czyuan_sc:false
      },
      // canSeeNameArr:[],
      // canSeeArr:[],
      // canSeeCus:'全部客户',
      // canSee_modal:false,
      addLoad:true,
      pwdLoad:true,
      addForm:{
        mobile:'',
        name:'',
        user_type:'',
        password:'',
        repassword:'',
        group_uuid:'',
        inst_uuid:''

      },
      pwd:{
        uuid:'',
        password:'',
        repassword:''
      },
      modal_pwd:false,
      modal_add:false,
      loading:true,
      total:0,
      timeRange:[],
      formItem:{
        loginName:'',
        loginType:'全部',
        belongedTo:'全部',
        pageSize:10,
        pageNumber:1,
        startTime:'',
        endTime:''
      },
      treeData:[],
      moreTypeList:[
        {
          uuid:'全部',
          desc:'全部'
        },
        {
          uuid:'00',
          desc:'平台运营'
        },
        {
          uuid:'01',
          desc:'银行客户'
        },
        {
          uuid:'02',
          desc:'服务商'
        }
      ],
      typeList:[
        {
          uuid:'00',
          desc:'平台运营'
        },
        {
          uuid:'01',
          desc:'银行客户'
        },
        {
          uuid:'02',
          desc:'服务商'
        }
      ],
      groupList:[],
      belongList:[],
      seviceList:[],
      customerList:[],
      columns:[
        {
          key:'mobile',
          title:'登录账号',
          fixed:'left',
          minWidth:100
        },
        {
          key:'name',
          title:'名称',
          minWidth:120
        },
        {
          key:'user_typeName',
          title:'类型',
          align:'center',
          minWidth:100
        },
        {
          key:'inst_name',
          title:'所属',
          minWidth:150
        },
        {
          key:'time',
          title:'新增时间',
          align:'center',
          minWidth:150
        },
        {
          key:'action',
          title:'操作',
          align:'center',
          minWidth:150,
          fixed:'right',
          render:(h,params)=>{
            //判断是否显示某些操作按钮
            return h('div',[
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#2D8CF0',
                  display:this.btnp.czyuan_czmm?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    this.goChagePwd(params.row);
                  }
                }
              },'重置密码'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#EA0000',
                  display:this.btnp.czyuan_sc?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    let config={
                      title:'删除操作员',
                      content:'是否要删除【账号名称】该操作员？删除后无法恢复。',
                      okText:'删除',
                      cancelText:'放弃操作',
                      onOk:()=>{
                        this.delete(params.row.uuid)
                      }
                    }
                    this.$Modal.confirm(config)
                  }
                }
              },'删除')
            ])
          }
        }
        
      ],
      data:[]
    };
  },
  methods:{
    searchTable(){
      this.formItem.pageNumber=1;
      this.getTable();
    },
    handleGetCondition(value){
      if(value=='全部'||value=='00'){
        
      }else{
        let node_type=value=='02'?'20':'0';
        this.getCondition(node_type);  
      }
      this.formItem.belongedTo="全部";
    },
    async getCondition(node_type){
      let res=await operatorAllCondition(node_type);
      let response=res.data;
      if(response.code===200){
        this.belongList=[{name:'全部',uuid:'全部'},...response.data];
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
    },
    async save(){
      let {mobile,
            name,
            user_type,
            password,
            group_uuid,
            inst_uuid
            // canSeeUuids
            }=this.addForm;
      let res=await saveOperator({
            mobile,
            name,
            user_type,
            password,
            group_uuid,
            inst_uuid
            // canSeeUuids
            });
      let response=res.data;
      if(response.code===200){
        this.$Notice.success({
          desc:'已保存'
        });
        this.modal_add=false;
        this.formItem.pageNumber=1;
        this.getTable();
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
    },
    async validatesSave(){
      const reg=this.$store.state.app.pwdReg;
      if(!this.addForm.mobile){
        this.$Notice.error({
          desc:"请输入登录账号"
        })
      }else if(!this.addForm.name){
        this.$Notice.error({
          desc:"请输入账号名称"
        })
      }else if(this.addForm.user_type.length<=0){
        this.$Notice.error({
          desc:"请选择账号类型"
        })
      }else if(this.addForm.user_type=='00'&&this.addForm.group_uuid.length<=0){
        this.$Notice.error({
          desc:"请选择分组"
        })
      }else if(this.addForm.user_type=='01'&&this.addForm.inst_uuid.length<=0){
        this.$Notice.error({
          desc:"请选择所属客户"
        })
      }else if(this.addForm.user_type=='02'&&this.addForm.inst_uuid.length<=0){
        this.$Notice.error({
          desc:"请选择所属服务商"
        })
      }else if(!this.addForm.password){
        this.$Notice.error({
          desc:'请输入密码'
        })
      }else if(!reg.test(this.addForm.password)){
        this.$Notice.error({
          desc:'密码必须为8-20位，同时包含字母和数字'
        })
      }else if(!this.addForm.repassword){
        this.$Notice.error({
          desc:'请再次输入密码'
        })
      }else if(this.addForm.repassword!=this.addForm.password){
        this.$Notice.error({
          desc:'两次输入的密码不一致'
        })
      }else{
        await this.save();
	  }
	  this.addLoad=false;
      let that=this;
      setTimeout(()=>{
        that.addLoad=true;
      },500)
    },
    // selectCanSee(){
    //   this.treeData[0].children=this.treeData[0].children.map(item=>{
    //     if(this.canSeeArr.includes(item.uuid)){
    //       item.checked=true;
    //     }else{
    //       item.checked=false;
    //     }
    //     return item
    //   });
    //   this.canSee_modal=true;
    // },
    // saveCanSeeCus(){
    //   this.treeData[0].children.map(item=>{
    //     if(item.check){
    //       this.canSeeArr.push(item.uuid);
    //       this.canSeeNameArr.push(item.name);
    //     }
    //   })
    //   if(this.canSeeArr.length>=this.customerList.length){
    //     this.canSeeCus='全部客户';
    //     this.addForm.canSeeUuids=''
    //   }else{
    //     this.addForm.canSeeUuids=this.canSeeArr.join(',');
    //     this.canSeeCus=this.canSeeNameArr.join(',');
    //   }
    // },
    async getGroup(){
      if(this.groupList.length<=0){
        let res=await getAllGroup();
        let response=res.data;
        if(response.code===200){
          this.groupList=response.data;
        }else{
          this.$Notice.error({
            desc:response.msg
          });
        }
      }
    },
    async getService(){
      if(this.seviceList.length<=0){
        let res=await getServiceAll();
        let response=res.data;
        if(response.code===200){
          this.seviceList=response.data;
        }else{
          this.$Notice.error({
            desc:response.msg
          });
        }
      }
    },
    async accountChange(val){
      
      if(val=='00'){
        await this.getGroup();
        this.canSeeCus='全部客户';
        this.addForm.group_uuid="";
        this.addForm.inst_uuid='';

      }else if(val=="01"){
        this.addForm.inst_uuid='';
      }else if(val=="02"){
        await this.getService();
        this.addForm.inst_uuid='';
        this.addForm.group_uuid="";
      }
    },
    async changePwd(){
      const reg=this.$store.state.app.pwdReg;
      if(!this.pwd.password){
        this.$Notice.error({
          desc:'请输入密码'
        })
      }else if(!reg.test(this.pwd.password)){
        this.$Notice.error({
          desc:'密码必须为8-20位，同时包含字母和数字'
        })
      }else if(!this.pwd.repassword){
        this.$Notice.error({
          desc:'请再次输入密码'
        })
      }else if(this.pwd.repassword!=this.pwd.password){
        this.$Notice.error({
          desc:'两次输入的密码不一致'
        })
      }else{
        let{uuid,password}=this.pwd;
        let res=await changePassword({uuid,password});
        let response=res.data;
        if(response.code===200){
          this.$Notice.success({
            desc:'已修改'
          });
          this.modal_pwd=false;
        }else{
          this.$Notice.error({
            desc:response.msg
          });
        } 
      }
      this.pwdLoad=false;
        let that=this;
        setTimeout(()=>{
          that.pwdLoad=true;
        },500)
    },
    goChagePwd(obj){
      this.pwd={
        uuid:obj.uuid,
        password:'',
        repassword:''
      };
      this.modal_pwd=true;
    },
    async delete(uuid){
      let res=await deleteOperator(uuid);
      let response=res.data;
      if(response.code===200){
        this.$Notice.success({
            desc:'已删除'
          });
          this.formItem.pageNumber=1;
          this.getTable();
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
    },
    pageChange(number){
      this.formItem.pageNumber=number;
      this.getTable();
    },
    pageSizeChange(size){
      this.formItem.pageSize=size;
      this.getTable();
    },
    async getTable(){
      this.loading=true;
      let form=JSON.parse(JSON.stringify(this.formItem));
      for(let key in form){
          if(form[key]==='全部'){
          form[key]='';
          }
      }
      if(!!this.timeRange[0]&&this.timeRange.length>0){
          form.startTime=util.time1(this.timeRange[0]);
          form.endTime=util.time1(this.timeRange[1]);
      }else{
          form.endTime='';
          form.startTime='';
      }
      let res=await getOperatorTable(form);
      let response=res.data;
      if(response.code===200){
        
          this.total=response.data.total;
          this.data=response.data.rows.map(item=>{
            item.time=!!item.created?item.created.slice(0,16):'';
            return item
          })
          this.loading=false;
      }else{
          this.$Notice.error({
              title: '请求出错',
              desc:response.msg
          });
      }
      
    },
  },
  watch:{
    modal_add:function(){
      if(!this.modal_add){
        
        this.addForm={
          mobile:'',
          name:'',
          user_type:'',
          password:'',
          repassword:'',
          group_uuid:'',
          inst_uuid:''
        };
        // this.treeData=[{
        //   title:'全部',
        //   uuid:'全部',
        //   children:this.customerList.map(item=>{
        //     item.title=item.name;
        //     item.checked=true;
        //     return item
        //   })
        // }]
      }
    }
  },
  created(){
    let that=this;
    this.btnp=util.bpower(this,this.btn);
    // this.getCondition();
    this.getTable();
    setTimeout(()=>{
      that.customerList=that.$store.state.user.customer;
      // that.treeData=[{
      //   title:'全部',
      //   uuid:'全部',
      //   children:that.customerList.map(item=>{
      //     item.title=item.name;
      //     item.checked=true;
      //     return item
      //   })
      // }]
    },2000)
  }
}

</script>
<style lang='scss' >
.canSeeText{
  color:#2d8cf0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:100%;
}
</style>